@charset "utf-8";
@import "../styles/rest.less";


.safe() {
	width: 894px;
	margin: 0 auto;
}

body {
	background-image: url(../img/login-bg.png);
}

.help {
    .safe;
    height: 78px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    color: #7f7f7f;
    a {
        color: #7f7f7f;
    }
    >div {
        margin-left: 27px;
        cursor: pointer;
    }
    >div:nth-of-type(1):hover a{
        opacity: 0.6;
        transition: all .3s;
    }
    >div:nth-of-type(2):hover p {
        opacity: 0.6;
        transition: all .3s;
    }
	
    .lang {
        display: flex;
        position: relative;
        .lang_w{
            position: absolute;
            width: 110px;
            height: 150px;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 0 6px #d3d3d3;
            right: 0;
            top:32px;
            z-index: 10;
            transition: all .3s;
            div {
                padding: 5px 20px;
                cursor: pointer;
                width: 70px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                &:hover {
                    background-color: #f9fafc;
                }
            }
        }
    }
    .lang::after {
        content: "";
        height: 0;
        width: 0;
        border: 5px solid transparent;
        border-top-color: #7f7f7f;
        display: inline-block;
        margin-top: 6px;
        margin-left:10px;
    }
}


main {
	position: relative;
	width: 300px;
	background-color: #fff;
	margin: 120px auto 30px;
	border-radius: 9px;
	padding: 40px;

	.saoma {
		position: absolute;
		right: 2px;
		top: 2px;
		display: flex;
		align-items: center;
		cursor: pointer;
		color: #7f7f7f;

		>div:nth-of-type(1) {
			position: relative;
			height: 23px;
			line-height: 23px;
			background: url(../img/middle.png) center center;
			margin: 0 12px;
			font-size: 12px;

			&::before {
				position: absolute;
				top: 0;
				left: -12px;
				width: 12px;
				height: 23px;
				content: "";
				background: url(../img/before.png) center center;
			}

			&::after {
				position: absolute;
				top: 0;
				width: 12px;
				height: 23px;
				content: "";
				background: url(../img/after.png) center center;
			}
		}
	}

	h1 {
		font-size: 26px;
		padding: 10px 0 30px;
		text-align: center;
	}

}

.login_top {
	display: flex;
	height: 34px;
	margin-bottom: 20px;
	justify-content: center;

	>div {
		font-size: 16px;
		width: 149px;
		padding: 0 10px;
		text-align: center;
		cursor: pointer;
	}

	span {
		font-size: 12px;
		color: #e5e5e5;
		transform: translateY(3px);
	}

}

.login_Yanz {

	>div:nth-of-type(1) {
		width: 270px;
		height: 25px;
		padding: 10px 15px;
		background-color: #f7f7f7;
		border-radius: 9px;
		margin-bottom: 10px;

		input {
			background-color: #f7f7f7;

			&::-webkit-input-placeholder {
				font-size: 12px;
				color: #b2b2b2;
			}
		}
	}

	>div:nth-of-type(2) {
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;

		input {
			width: 170px;
			height: 25px;
			padding: 10px 15px;
			background-color: #f7f7f7;
			border-radius: 9px;
			cursor: not-allowed;

			&::-webkit-input-placeholder {
				font-size: 12px;
				color: #b2b2b2;
			}
		}

		>div {
			width: 75px;
			height: 45px;
			padding: 0 8px;
			background-color: #d9d9d9;
			border-radius: 9px;
			color: #fff;
			font-size: 12px;
			text-align: center;
			line-height: 45px;
			cursor: not-allowed;
		}

	}
}

.login_into {
	margin: 36px 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15px;
	border-radius: 9px;
	width: 100%;
	height: 48px;
	color: #fff;
	cursor: not-allowed;
	background-color: #b0f3db;
}

.login_into2 {
	margin: 36px 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15px;
	border-radius: 9px;
	width: 100%;
	height: 48px;
	color: #fff;
	cursor: pointer;
	background-color: #b0f3db;
}

.login_password {

	>div:nth-of-type(1) {
		width: 270px;
		height: 25px;
		padding: 10px 15px;
		background-color: #f7f7f7;
		border-radius: 9px;
		margin-bottom: 10px;

		input {
			background-color: #f7f7f7;

			&::-webkit-input-placeholder {
				font-size: 12px;
				color: #b2b2b2;
			}
		}
	}

	>div:nth-of-type(2) {
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width:300px;
		height: 45px;
		background-color: #f7f7f7;
		border-radius: 9px;
			input {
			width: 240px;
			height: 25px;
			padding: 10px 15px;
			background-color: #f7f7f7;
			border-radius: 9px;
				&::-webkit-input-placeholder{
				font-size: 12px;
				color: #b2b2b2;
				}
			}
			>div {
				padding-right: 11px;
			}
			
	
	}
	a {
		font-size: 12px;
		color: #666666;
		&:hover {
			color: #b3b3b3;
			transition: all .3s;
		}
	}
}

.privacy {
	display: flex;
	margin-bottom: 36px;
	justify-content: space-between;
	a {
		font-size: 12px;
		color: #666666;
		&:hover {
			color: #b3b3b3;
			transition: all .3s;
		}
	}
	>a:nth-of-type(2){
		color: #00d488;
		&:hover {
			color: #b0f3db;
			transition: all .3s;
		}
	}
}

.other {
		display: flex;
        justify-content: space-between;
		margin-bottom: 12px;
        >div {
            font-size: 12px;
            color: #666;
            flex-shrink: 0;
            width: 75px;
            padding: 0 21px;
        }
        hr {
            width: 100%;
            border: none;
            height: 1px;
            background-color: #e0e0e0; 
        }
}

.qq {
	img {
		width: 28px;
		height: 28px;
		margin: auto;
		cursor: pointer;
	}
}

.login_phone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	h2 {
		padding: 10px 0 30px;
		font-size: 26px;
	}
	>div:nth-of-type(1){
		margin-bottom: 20px;
		position: relative;
		img {
			width: 178px;
			height: 178px;
			border:1px solid #e0e0e0;
			border-radius: 8px;
		}
		.er_shixiao {
			position: absolute;
			top: 0;
			width: 178px;
			height: 178px;
			background-color:rgba(255,255,255,.9);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			p {
				font-size: 18px;
				margin-bottom: 15px;
			}
			div {
				font-size: 15px;
				background-color: #00d488;
				width: 110px;
				height: 50px;
				border-radius: 9px;
				color:#fff;
				text-align: center;
				line-height: 50px;
			}
		}
	}
	>div:nth-of-type(2){
		margin-bottom: 20px;
		img {
			width: 180px;
			height: 180px;
			transform: translateX(10px);
		}
	}
	p {
		font-size: 14px;
		color: #4c4c4c;
	}
}


.footer_c {
	.safe;
	padding: 20px;
	text-align: center;

	span {
		font-size: 12px;
		color: #9b9b9b;
		margin: 0 3px;
	}
}

.eyess {
	display: block;
	background: url(../img/reg01.png);
	width: 25px;
	height: 25px;
	background-size: 100%;
	cursor: pointer;
}
.eyell {
	display: block;
	background: url(../img/reg02.png);
	width: 25px;
	height: 25px;
	background-size: 100%;
	cursor: pointer;
}

.none {
	display: none !important;
}

.block {
	display: block !important;
}